import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { ActivityIndicator } from 'antd-mobile'
import './NoteList.css'

class NoteList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            noteList: [],
            starclass: [],
            likeList: [],
            isShow: true
        }
    }

    componentWillMount(){
        let url1 = "http://62.234.30.197:8088/topics/idchalike";
        fetch(url1, {
            method: 'POST',
            body: JSON.stringify({
                userid: localStorage.getItem("userid")
            }),
            headers: {
                "Access-Control-Allow-Origin":"*",
                'content-type': 'application/json'
            },
            mode: 'cors'
        })
        .then(res => res.json())
        
        .then(res => this.setState({
            likeList: res
        }))
<<<<<<< HEAD
        //.then(res => console.log(this.state.likeList))
=======
        .then(res => console.log(this.state.likeList))
>>>>>>> 429ee6d905019f594144cf938b04d544385572a3
    }
    componentDidMount(){
        let url = 'http://62.234.30.197:8088/topics/chaall';
        fetch(url, {
        method: 'POST',
        body: JSON.stringify({}),
        headers: {
            "Access-Control-Allow-Origin":"*",
            'content-type': 'application/json'
        },
        mode: 'cors'
        })
        .then(res => res.json())
        // .then(res=>console.log(res))
        .then(res => this.setState({
            noteList: res
        }))
        // .then(res => console.log(this.state.noteList))
        .then(res => {
            for(let i = 0; i < this.state.noteList.length; i ++){
                let flag = 0;
                for(let j = 0; j < this.state.likeList.length; j ++){
                    if(this.state.noteList[i]['topicsid'] == this.state.likeList[j]['topicsid']){
                        flag = 1;
                        this.setState({
                            starclass: [...this.state.starclass, 1]
                        });
                        break;
                    }
                }
                if(flag == 0){
                    this.setState({
                        starclass: [...this.state.starclass, 0]
                    });
                }
            }
            this.setState({
                isShow: false
            })
            // console.log(this.state.starclass)
        })
        // .then(res => console.log(this.state.starclass))
        //.catch(e=>console.log(e))
    }
    

    render() {
        const likeCount = (topid, useid) => {
            let url = 'http://154.8.202.56:8081/articlelist/topicsgai';
            fetch(url, {
                method: 'POST',
                body: JSON.stringify({
                    topicsid: topid,
                    userid: useid
                }),
                headers: {
                    "Access-Control-Allow-Origin":"*",
                    'content-type': 'application/json'
                },
                mode: 'cors'
            })
        }
        return (
            <div className="list_body">
                <ActivityIndicator 
                    toast
                    text="加载中..."
                    animating={this.state.isShow}
                />
                <ul>
                    {
                        this.state.noteList.map((item, idx) => (
                            <NavLink key={idx} to={{pathname:'/notemsg/:' + item.topicsid, state: {item:item, iflike: this.state.starclass[idx]}}}>
                                <li className="node_item">
                                    
                                    <img src={item.pic} alt="pic" οnerrοr='http://qkpa8y0ib.hb-bkt.clouddn.com/pic2.jpg'/>
                                    <p className="list_p">{item.txt}</p>
                                    <p className="date_p">{item.writedate}</p>
                                    <div className="i_div">
                                        
                                        <i className={`iconfont ${this.state.starclass[idx] == 0?"iconicon-xin":"iconicon-hongxin"}`}
                                            onClick={(e) => {
                                                // event.cancelBubble = true
                                                e.stopPropagation();
                                                e.nativeEvent.stopImmediatePropagation();
                                                e.preventDefault();
                                                
                                                if(this.state.starclass[idx] == 0) {
                                                    likeCount(item.topicsid, localStorage.getItem("userid"));
                                                    item.likecount += 1;
                                                    let arr = this.state.starclass;
                                                    arr[idx] = 1;
                                                    this.setState({
                                                        starclass: arr
                                                    });

                                                } 
                                                // else{
                                                //     item.likecount -= 1;
                                                //     let arr = this.state.starclass
                                                //     arr[idx] = 0;
                                                //     this.setState({
                                                //         starclass: arr
                                                //     });
                                                // }
                                            }}
                                        ></i>
                                        &nbsp;{item.likecount}&nbsp;&nbsp;  
                                        <i className="iconfont iconicon-zhunfa"></i>
                                    </div>
                                </li>
                            </NavLink>
                        ))
                    }
                </ul>
            </div>
        )
    }}

export default NoteList
